<template>
	<view>
		<u-navbar :is-back="showBack" :border-bottom="true">我的二维码</u-navbar>
		<view class="width boxwhite">
			<view class="titlesp">资质二维码（乘客端）</view>
			<view class="img">
				<ayQrcode ref="qrcode"
					  qrcode_id="qrcode" 
					  :modal="modal_qr" 
					  :url="modal_qr_Url" 
					  @hideQrcode="hideQrcode" 
					  :height="200" 
					  class="code"
					  :width="200"
					  themeColor="#000"
				 /> 
			</view>
		</view>
		
		<view class="width boxwhite">
			<view class="titlesp">资质二维码（交管端）</view>
			<view class="img">
				<ayQrcode
					  ref="qrcodeTwo"
					  qrcode_id="qrcoded" 
					  :modal="modal_qr_Two" 
					  :url="modal_qr_Url_Two" 
					  @hideQrcode="hideQrcode" 
					  :height="200" 
					  class="code"
					  :width="200"
					  themeColor="#000"
				 /> 
				</view>
		</view>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	import configData from "@/config/config";
	import storage from "@/utils/storage.js";
	export default {
		data(){
			return {
				showBack:true,
				//二维码相关参数
				modal_qr: false,
				modal_qr_Two:false,
				modal_qr_Url_Two: configData.httpUrl+'pages/codeinfor/policeinfor?id='+storage.getUserInfo().info.id+'&&isuser=1', // 要生成的二维码值
				modal_qr_Url: configData.httpUrl+'pages/codeinfor/ckinfor?id='+storage.getUserInfo().info.id, // 要生成的二维码值 
			}
		},
		components: {
			ayQrcode
		},
		onShow() {
			this.showQrcode()
		},
		methods:{
			// 展示二维码
			showQrcode() {
				let _this = this;
				this.modal_qr = true;
				this.modal_qr_Two = true;
				setTimeout(function() { 
					_this.$refs.qrcode.crtQrCode()
					_this.$refs.qrcodeTwo.crtQrCode()
				}, 50)
			},
			//跳转到首页
			leftClick(){
				uni.switchTab({
					url: "/pages/tabbar/home/index"
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.img{
		width:100%;
		height: 220px;
	}
	.boxwhite{
		padding:10px;
		background-color: #fff;
		margin:20px auto;
	}
	.itemliucheng{
		color: #777;
		font-size: 14px;
		padding: 10px 8px 0 0px;
	}
	.infor{
		.titleyear{
			text-align:right;
			font-size: 12px;
			color:#666;
		}
		background-color: #fff;
		width: 100%;
		margin: auto;
		padding: 15px;
		font-size: 12px;
		color:#333;
		.successimg{
			width: 60px;
			height: 60px;
			margin-right: 10px;
		}
		.carimg{
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
		.carpaizhao{
			color:#666;
		}
		.shenhetime{
			border-top: 1px solid #ececec;
			padding-top: 20px;
			margin-top: 15px;
			font-size: 12px;
			color:#666;
		}
	}
	.titlesp{
		font-weight: 700;
		font-size: 17px;
		color: #323233;
		letter-spacing: 0;
		position: relative;
		z-index: 2;
		padding-left: 10px;
		margin: 15px auto;
	}
	.titlesp::after{
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		bottom: 0;
		width: 31px;
		height: 11px;
		background-image: -webkit-gradient(linear, right top, left top, from(#fff), to(#217bfb));
		background-image: -webkit-linear-gradient(right, #fff, to(#217bfb));
		background-image: linear-gradient(270deg, #fff, to(#217bfb));
	}
</style>